<template>
    <div class="login">
        <div class="registry-form">
            <div class="registry-header" flex="main:center">
                <!-- <img src="../../assets/images/logo.png" height="80" alt="" /> -->
                <h3>注册账号</h3>
            </div>
            <el-tabs v-model="activeName" stretch>
                <el-tab-pane label="广告主注册" name="index"></el-tab-pane>
                <el-tab-pane label="流量主注册" name="second"></el-tab-pane>
            </el-tabs>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入应用名称', trigger: 'blur' }]" label="应用名称">
                    <el-input size="small" v-model="formLabelAlign.name" placeholder="请输入应用名称"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入行业', trigger: 'blur' }]" label="行业">
                    <el-input size="small" v-model="formLabelAlign.region" placeholder="请输入行业"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入推广链接', trigger: 'blur' }]" label="推广链接">
                    <el-input size="small" v-model="formLabelAlign.a" placeholder="请输入推广链接"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]" label="联系人">
                    <el-input size="small" v-model="formLabelAlign.b" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]" label="邮箱">
                    <el-input size="small" v-model="formLabelAlign.c" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]" label="电话号码">
                    <el-input size="small" v-model="formLabelAlign.d" placeholder="请输入电话号码"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]" label="验证码">
                    <el-input size="small" v-model="formLabelAlign.e" placeholder="请输入验证码">
                        <template slot="append"
                            ><div class="code-btn" @click="getCode">{{ second === 60 ? "获取验证码" : `${second}s` }}</div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]" label="密码">
                    <el-input size="small" v-model="formLabelAlign.f" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="name" :rules="[{ required: true, message: '请输入确认密码', trigger: 'blur' }]" label="确认密码">
                    <el-input size="small" v-model="formLabelAlign.h" placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-button type="primary" :loading="loginLoading" style="width: 100%; margin-bottom: 18px" @click.native="login">注册</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
import { setToken } from "../../utils/dataStorage";
// import { login as loginApi } from "../../api/demo";

export default {
    data() {
        return {
            labelPosition: "right",
            activeName: "index",
            formLabelAlign: {
                name: "",
                region: "",
                type: "",
            },
            loginLoading: false,
            second: 60,
        };
    },
    methods: {
        getCode() {
            let init = 60;
            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
                init--;
                this.second = init;
                if (init === 0) {
                    this.second = 60;
                    this.timer && clearInterval(this.timer);
                    this.timer = null;
                }
            }, 1000);
        },
        login() {
            this.loginLoading = true;
            //loginApi({userNmae:this.userNmae,password:this.password}).then(r=>{}).catch(_=>{})
            setTimeout(() => {
                setToken("123456789");
                this.$notify({
                    title: "登录成功",
                    message: "欢迎使用广告管理系统！",
                    type: "success",
                });
                this.loginLoading = false;
                this.$router.push({ path: "/" });
            }, 1000);
        },
    },
};
</script>

<style lang="scss">
@import "Login.scss";
.registry-form {
    width: 425px;
    padding: 30px;
    background-color: white;
    text-align: left;
    border-radius: 4px;
    position: relative;
    margin-left: 0;
    margin-right: 0;
    zoom: 1;
    display: block;
}
.registry-header {
    padding: 20px 0;
}
</style>
